<template>
  <div id="trash" class="detail">
    <div class="note-sidebar">
      <h3 class="notebook-title">回收站</h3>
      <div class="menu">
        <div>更新时间</div>
        <div>标题</div>
      </div>
      <ul class="notes">
        <li v-for="note in trashNotes" :key="note.id">
          <router-link :to="`/trash?noteId=${note.id}`">
            <span class="date">{{ note.friendlyUpdatedAt }}</span>
            <span class="title">{{ note.title }}</span>
          </router-link>
        </li>
      </ul>
    </div>
    <div class="note-detail">
      <div class="note-bar" v-if="true">
        <span> 创建日期: {{ curTrashNote.friendlyCreatedAt }}</span>
        <span> | </span>
        <span> 更新日期: {{ curTrashNote.friendlyUpdatedAt }}</span>
        <span> | </span>
        <span> 所属笔记本: {{ belongTo }}</span>

        <a class="btn action" @click="onRevert">恢复</a>
        <a class="btn action" @click="onDelete">彻底删除</a>
      </div>
      <div class="note-title">
        <span>{{ curTrashNote.title }}</span>
      </div>
      <div class="editor">
        <div class="preview markdown-body" v-html="compiledMarkdown"></div>
      </div>
    </div>
  </div>
</template>
<script>
import MarkdownIt from "markdown-it";
import auth from "@/apis/auth";
import { mapGetters, mapMutations, mapActions } from "vuex";
const md = new MarkdownIt();

export default {
  created() {
    this.checkLogin();
    this.getNotebooks();
    this.getAll().then(() => {
      this.setCurTrashNote({ curTrashNoteId: this.$route.query.noteId });
      this.$router.replace({
        path: "/trash",
        query: {
          noteId: this.curTrashNote.id,
        },
      });
    });
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["trashNotes", "belongTo", "curTrashNote", "belongTo"]),
    compiledMarkdown() {
      return md.render(this.curTrashNote.content || "");
    },
  },
  methods: {
    ...mapMutations(["setCurTrashNote", "setTrashNote", "deleteTrashNote"]),
    ...mapActions([
      "getAll",
      "revertTrashNote",
      "deleteTrashNote",
      "checkLogin",
      "getNotebooks",
    ]),
    onRevert() {
      this.revertTrashNote({ trashNoteId: this.curTrashNote.id }).then(() => {
        this.setCurTrashNote({});
        this.$router.replace({
          path: "/trash",
          query: {
            noteId: this.curTrashNote.id,
          },
        });
      });
    },
    onDelete() {
      this.deleteTrashNote({ trashNoteId: this.curTrashNote.id }).then(() => {
        this.setCurTrashNote({});
        this.$router.replace({
          path: "/trash",
          query: {
            noteId: this.curTrashNote.id,
          },
        });
      });
    },
  },
  beforeRouteUpdate(to, from, next) {
    this.setCurTrashNote({ curTrashNoteId: to.query.noteId });
    next();
  },
};
</script>
<style lang="less" >
@import url(../assets/note-sidebar.less);
@import url(../assets/note-detail.less);

#trash {
  display: flex;
  align-items: stretch;
  background-color: #fff;
  flex: 1;

  .note-bar {
    .action {
      float: right;
      margin-left: 10px;
      padding: 2px 4px;
      font-size: 12px;
    }
  }
}
</style>
